<script setup>
import { Handle, Position } from '@vue-flow/core'
const props = defineProps(['data'])
</script>
<template>
  <div :class="['custom-node', props.data.nodeType]">
    <Handle type="target" :position="Position.Top" class="custom-handle" />
    <Handle type="target" :position="Position.Left" class="custom-handle" />
    <div class="custom-label">{{ data.label }}</div>
    <Handle type="source" :position="Position.Right" class="custom-handle" />
    <Handle type="source" :position="Position.Bottom" class="custom-handle" />
  </div>
</template>
<style scoped>
.custom-node {
  min-width: 120px;
  min-height: 56px;
  padding: 16px 32px;
  border-radius: 18px;
  font-size: 20px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 24px 0 rgba(0,0,0,0.10);
  border: 3px solid var(--node-border, #fff);
  background: var(--node-bg, #fff);
  color: var(--node-color, #222);
  position: relative;
  transition: background 0.2s, color 0.2s, border 0.2s;
}
.custom-label {
  z-index: 2;
}
.custom-handle {
  width: 18px !important;
  height: 18px !important;
  border-radius: 50%;
  border: 3px solid #fff;
  background: #222;
  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
  z-index: 3;
}
.custom-node.start {
  --node-bg: #6ecf8d;
  --node-border: #3fa46a;
  --node-color: #fff;
}
.custom-node.task {
  --node-bg: #4faaff;
  --node-border: #1e6bb8;
  --node-color: #fff;
}
.custom-node.condition {
  --node-bg: #ffd86e;
  --node-border: #b89c1e;
  --node-color: #222;
}
.custom-node.end {
  --node-bg: #ff6e6e;
  --node-border: #b81e1e;
  --node-color: #fff;
}
@media (prefers-color-scheme: dark) {
  .custom-node {
    --node-bg: #222;
    --node-border: #444;
    --node-color: #fff;
    box-shadow: 0 4px 24px 0 rgba(0,0,0,0.40);
  }
  .custom-handle {
    border: 3px solid #222;
    background: #fff;
  }
}
</style> 